<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>登录</title>
		<link href="${pageContext.request.contextPath }/admin/css/default.css" rel="stylesheet" type="text/css" />
	    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/js/themes/default/easyui.css" />
	    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/js/themes/icon.css" />
	    <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/jquery-1.4.4.min.js"></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/jquery.easyui.min.1.2.2.js"></script>
		<style type="text/css">
			/*公共样式*/
			html, body ,p{margin:0px; padding:0px; font-family:'Microsoft YaHei' ! important; font-size:12px; color:#333333;}
			a{text-decoration:none;}
			a:link {color:#333333;}
			a:visited {color:#333333;}
			a:hover {color:#0195df;}
			a:active{color:#333333;}
			img{border:0;}
			/*公共底脚*/
			#g_foot_bar {float:top; width:100%; min-width:1002px; }
			#g_foot_center {width:1002px; height:190px; margin:0px auto;}
			#g_foot_center .left {float:left; width:800px; margin-top:18px;}
			#g_foot_center .left .netName {float:top; height:30px; font-size:16px; margin-bottom:4px; letter-spacing:1px; color:#3f3f3f;}
			#g_foot_center .left .intro {float:top; height:20px; line-height:20px; margin-top:4px; font-size:12px; color:#696E78;}
			#g_foot_center .left .intro a{color:#696E78;}
			#g_foot_center .left .intro a:hover {color:#0195df;}
			#g_foot_center .right {float:left; width:200px; margin-top:20px;}
			#g_foot_center .right .qr_code {float:top; width:90px; height:90px; margin-left:54px;}
			#g_foot_center .right .qr_code a{display:block;}
			#g_foot_center .right .qr_code img {width:100%; height:100%;}
			#g_foot_center .right .cp_name {float:top; width:200px; height:20px; line-height:20px; margin-bottom:4px; text-align:center; color:#3f3f3f;}
			#g_foot_center .right .tel_pos {float:top; width:170px; height:20px; margin-left:32px; color:#696E78;}
			
			/*login*/
			.header{width:1000px;margin:80px auto 22px;}
			.container{overflow: hidden;position: relative;width:100%;height:600px;background:url(${pageContext.request.contextPath }/login/img/login_body_bg.png) center center no-repeat;margin-bottom: 20px;}
			.content{width:1000px;height:100%;margin:auto;overflow: hidden;}
			.loginPane{color: #c9c9c9;width: 286px;height:401px;float:right;margin-top:100px;margin-right:1%;background-color:#EBF6FC;border-radius:4px;box-shadow: 0px 0px 5px #888;}
			.loginPane .title{color:#FE421C;font-size: 14px;letter-spacing: 1px;margin-top:35px;}
			.loginPane p{position:relative;margin-left:20px;margin-top: 20px;}
			.loginPane p:first-child{height:30px;line-height: 30px;}
			.loginPane p img.userInputIcon{position: absolute;top:12px;margin-left:3px;}
			.loginPane p input[type=text]{border:1px solid #bfbfbf;height: 40px;line-height: 40px;}
			.loginPane p input.userInput{border:1px solid #bfbfbf;line-height: 40px;width: 213px;padding-left: 28px;}
			.loginPane p input.codeInput{padding-left:5px;width: 100px;}
			.qrCodeImg{vertical-align: middle;margin-left: 5px;margin-top: -4px;}
			.loginPane p input[type=checkbox]{vertical-align:middle;margin-top: -1px;outline:none;}
			a.nextCode{color: #38a4dc;text-decoration: underline;font-style:italic;}
			a.forgetPass{float:right;color: #c9c9c9;margin-right:30px;display: none;}
			a.forgetPass:hover{color: #0195df;}
			.submitBt{text-align: center;overflow:hidden;}
			.submitBt span {
				display:inline-block;
			    position: relative;
			    width: 104px;
			    height: 43px;
			    line-height: 43px;
			    letter-spacing: 3;
			    text-align: center;
			    cursor: pointer;
			    background: #0195df;
			    margin-right:17px;
			    border: none;
			    color:#fff;
			}
			.submitBt span:hover {
			    background: #22a9ff;
			}
			::-moz-placeholder { color: #c9c9c9; }
			::-webkit-input-placeholder { color:#c9c9c9; }
			:-ms-input-placeholder { color:#c9c9c9; }
			.submitBt span.login{background: url(${pageContext.request.contextPath }/login/img/login_bt_bg.png) center center no-repeat;}
			.submitBt span.login:hover{background: url(${pageContext.request.contextPath }/login/img/login_bt_bg_pressed.png) center center no-repeat;}			
			.submitBt span.register{color:#6D798C;background: url(${pageContext.request.contextPath }/login/img/register_bt_bg.png) center center no-repeat;}
			.submitBt span.register:hover{background:url(/login/img/register_bt_bg_pressed.png) center center no-repeat;}
		</style>
		<script>
			// 动态改变验证码图片
			function changeImg(){
				var image=document.getElementById("qrCodeImg");
				var src="${pageContext.request.contextPath }/admin/user/imgCode?"+Math.random();
				image.setAttribute("src",src );
			}
		</script>
	</head>
	<body>
	<div class="header">
		<a href="#" title="百菜园"><img src="${pageContext.request.contextPath }/login/img/LOGO_BCY.png" width="262" height="40" /></a>
	</div>
	<div class="container">
		<div class="content">
			<div class="loginPane">
				<form action="${pageContext.request.contextPath }/admin/user/login" method="post" id="loginForm">
				<p class="title">欢迎登录百菜园内部工单系统</p>
				<p><img class="userInputIcon" src="${pageContext.request.contextPath }/login/img/icon_user.png"/><input type="text" name="userinfo.USERNAME" id="username" class="userInput" placeholder="请输入用户名或手机号"/></p>
				<p><img class="userInputIcon" src="${pageContext.request.contextPath }/login/img/icon_pswd.png"/><input type="password" name="userinfo.PASSWORD" id="password" style="height:40px;" class="userInput" placeholder="请输入密码"/></p>
				<p>
					<input class="codeInput" type="text" name="imgcode" placeholder="请输入验证码"/><img id="qrCodeImg" class="qrCodeImg"  src="${pageContext.request.contextPath }/admin/user/imgCode" width="83" height="40"/>
					<a href="javascript:changeImg()">看不清楚</a>
				</p>
		<!-- 	<p><label><input type="checkbox" /> 记住密码</label><a class="forgetPass"href="#">忘记密码?</a></p>	 -->
				<p class="submitBt"><span class="login" onclick="doSub()">登录</span><!-- <span class="register">注册</span> --></p>
				<p style="color:red;">${LoginMsg }</p>				
				</form>
			</div>
		</div>
    </div>
    	<div id="g_foot_bar">
			<div id="g_foot_center">
			    <div class="left">
				    <div class="netName">百菜园</div>
					<div class="intro">合作机构：<a href="#" target="_blank">智助网</a>   <a href="http://www.whzykj.com/" target="_blank">智一科技</a></div>
					<div class="intro">官方邮箱：admin@whzykj.com</div>
					<div class="intro">联系地址：武汉市东湖新技术开发区光谷软件园A11栋211</div>
					<div class="intro">Copyright &copy; 2015-2018 | All Rights Reserved 百菜园网络科技（武汉）有限公司</div>
					<div class="intro">鄂ICP备16009208</div>
				</div>
				<div class="right">
				    <div class="qr_code">
				    	<a href="javascript:void(0);" id="QRCode"><img src="${pageContext.request.contextPath }/login/img/qrCode8cm.png"></a>
				    </div>
					<div class="cp_name">百菜园</div>
					<div class="tel_pos">服务电话：027-63374845</div>
					<div class="tel_pos">邮政编码：430000</div>
				</div>
			</div>
		</div>
    <script type="text/javascript" src="${pageContext.request.contextPath }/login/js/jquery-1.11.1.min.js" ></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/login/js/resize.js"></script>
    <script type="text/javascript">
    function doSub(){
    	var username= $.trim($('#username').val());
    	var password= $.trim($('#password').val());
    	
    	if(username==''){
 			alert('登陆用户信息不能为空，请输入用户名或手机号！');
 			$('#username').focus();
    		return;
    	}
    	if(password==''){
    		alert('登陆密码不能为空，请输入密码！');
    		$('#password').focus();
    		return;
    	}
    	$('#loginForm').submit();
    }
	$(function () {
		$('input:text').val("");
		$('input:text:first').focus();
		var $inp = $('input:text');
		$inp.bind('keydown', function (e) {
			var key = e.which;
			if (key == 13) {
				e.preventDefault();
				var nxtIdx = $inp.index(this) + 1;
				$(":input:text:eq(" + nxtIdx + ")").focus();
				//验证证不为空， enter键后提交
				if($('input.codeInput').val() != '' && nxtIdx == $('input:text').length)
				{
					$('#loginForm').submit();
				}
			}
		});
		
		
		$('span.register').on('click',function(){
			window.location.href="${pageContext.request.contextPath }/login/register.html";
		});
	});
</script> 
	</body>
</html>